<template>
	<view class="content" id="scrollView">

		<!-- 占位部分 -->
		<view style="width: 100rpx;height: 24rpx;"></view>

		<view class="data_item" v-for="(item,index) in data_list" :key="item.id">
			<view style="margin: 0 12rpx 0 0;">{{index > 8 ? index + 1 : '0' + (index + 1)}}.</view>
			<input class="et_title" placeholder="请输入电话名称" :value="item.title" @input="onInputPhoneName($event,index)" />
			<input class="et_phone" placeholder="请输入电话号码" :value="item.phone" @input="onInputPhoneNum($event,index)" />
			<view class="btn_del" @click.stop="onDel(index)">删除</view>
			<!-- <view style="height: 1rpx;width: 100%;background-color: #ddd;margin: 16rpx 0 0 0;"></view> -->
		</view>

		<!-- 空白数据提示 -->
		<view v-if="!data_list || data_list.length <= 0" style="width: 100vw;height: 40vh;line-height: 40vh;text-align: center;">暂无数据~</view>

		<!-- 占位布局 -->
		<view style="width: 100%;height: 250rpx;"></view>

		<view class="op_btn_div">
			<view id="btn_add" @click.stop="onAddPhone">新增电话</view>
			<view id="btn_ok" @click.stop="onOk">完成编辑</view>
		</view>

	</view>
</template>

<script>
	import { getUInfo, } from '@/util/util.js'
	export default {
		data() {
			return {
				site_id: '', // 传值:网点id
				status: '', // 传值:网点启用状态
				data_list: [],

				word: '', // 搜索关键字
			}
		},

		onLoad(opts) {
			// console.log('onLoad.opts = ', opts);
			this.site_id = opts.site_id
			this.status = opts.status
		},

		mounted() {
			this.data_list = JSON.parse(uni.getStorageSync('edit_site_phone'))
		},

		methods: {

			// 删除电话
			onDel(index) {
				uni.showModal({ title: '提示', content: '是否删除该数据？', success: (res) => { res.confirm && this.data_list.splice(index, 1) } })
			},
			// 完成编辑
			onOk() {
				let that = this
				uni.showModal({ title: '提示', content: '确认提交数据？', success: (res) => { res.confirm && that.postData() } })
			},
			// 点击添加数据
			onAddPhone() {
				if (this.data_list && this.data_list.length >= 20) {
					uni.showToast({ icon: 'none', title: '最多录入20个电话' })
					return
				}
				this.data_list.push({})
				this.scrollToBottom()
				uni.showToast({ icon: 'none', title: '已添加' })
			},
			// 输入电话名称
			onInputPhoneName(e, index) {
				this.data_list[index].title = e.detail.value
			},
			//输入电话号码
			onInputPhoneNum(e, index) {
				this.data_list[index].phone = e.detail.value
			},
			// 点击选择数据
			onSelItem(item) {
				uni.$emit('onSelTms', { msg: item })
				uni.navigateBack()
			},

			// 接口:提交数据
			async postData() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$editSite({ token, site_id: this.site_id, status: this.status, phone_list: JSON.stringify(this.data_list) })
				if (res.code == 1) {
					uni.$emit('onEditLogInfo', { msg: that.data_list })
					uni.showModal({ title: '提示', content: `${res.msg}`, showCancel: false, success: (res) => { res.confirm && uni.navigateBack() } })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			scrollToBottom() {
				// 获取滚动容器的高度
				const query = uni.createSelectorQuery()
				query.select('#scrollView').boundingClientRect(rect => {
					// 计算滚动位置
					const scrollHeight = rect.height // 容器高度
					uni.pageScrollTo({
						scrollTop: scrollHeight, // 滚动到最底部
						duration: 160 // 动画时长，单位ms
					})
				}).exec()
			},

		}
	}
</script>

<style scoped>
	.content {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.data_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 24rpx;
		font-size: 28rpx;
		border-radius: 16rpx;
		background-color: white;
	}

	.et_title {
		border: solid 1rpx #ccc;
	}

	.et_phone {
		border: solid 1rpx #ccc;
		margin: 0rpx 0 0 12rpx;
		color: #888;
	}

	.btn_del {
		color: red;
		width: 120rpx;
		text-align: center;
		font-size: 26rpx;
		margin: 0 0 0 12rpx;
		border: solid 1rpx red;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100%);
		margin: 0rpx 0rpx 0 0rpx;
		background-color: white;
	}

	#btn_add {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: orange;
		color: white;
		margin: 20rpx 20rpx 20rpx 40rpx;
		border-radius: 10rpx;
	}

	#btn_ok {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 20rpx 40rpx 20rpx 20rpx;
		border-radius: 10rpx;
	}
</style>